<template>
    <el-card>
        <div class="search-bar">
            <el-input placeholder="查询关键字-不输入查询所有" class="input-with-select"
                clearable
            >
                <template #append>
                    <el-button type="success" icon="el-icon-search"></el-button>
                </template>
            </el-input>
            <el-button type="primary">添加新商品</el-button>
        </div>
        <el-table border :data="goods">
            <el-table-column label="序号" type="index" width="60px"></el-table-column>
            <el-table-column label="商品名称" prop="goods_name"></el-table-column>
            <el-table-column label="商品价格(元)" prop="goods_price" width="110px"></el-table-column>
            <el-table-column label="商品重量" prop="goods_weight" width="110px"></el-table-column>
            <el-table-column label="添加时间" prop="add_time" :formatter="formatterDate" width="200px"></el-table-column>
            <el-table-column label="操作" width="180px">
                <template>
                    <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
                    <el-popconfirm class="delete-btn" title="确定删除当前商品吗?">
                        <template #reference>
                            <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 15, 20, 25, 30]"
            :current-page="params.pagenum"
            :page-size="params.pagesize"
            :total="total"
        >
        </el-pagination>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            goods:[],
            query:"",
            params:{
                query:"",
                pagenum:1,
                pagesize:10
            },
            total:0
        }
    },
    methods:{
        formatterDate(r,c,value){
            let data = value * 1000;
            return this.$util.formatDate(data,"yyyy年MM月dd日 HH:mm:ss")
        },
        async findGoodList(){
            this.query = this.params.query;
            let { total,goods } = await this.$api.loadGoods(this.params);
            // console.log(total,users);
            this.total = total;
            this.goods = goods;
        }
    },
    created(){
        this.findGoodList();
    }
};
</script>

<style lang="less" scoped>
.search-bar {
    margin-bottom: 20px;
    .el-input {
        width: 500px;
        margin-right: 30px;
    }
}
.el-pagination{
    margin-top: 20px;
}
.delete-btn{
    margin: 0px 6px;
}
.el-select{
    width: 100%;
}
.el-form-item::v-deep .el-form-item__label{
    text-align: justify;
    text-align-last: justify;
    position: relative;
    padding-left: 12px;
    &::before{
        position: absolute;
        left: 0px;
    }
}
</style>